<template>
    <div id="app">
        <h1>Hello Vuex</h1>
        <!--<p>{{$store.state.count}} - {{count}}</p>-->
        <p>{{count}}</p>
        <p>
            <button @click="$store.commit('jia',{a:10})">+</button>
            <button @click="$store.commit('jian')">-</button>
        </p>
        <p>
            <button @click="jiaplus">+plus</button>
            <button @click="jianplus">-plus</button>
        </p>
    </div>

</template>

<script>
    import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'

    export default{
        name: 'app',
        data(){
            return {
                count: 0
            }
        },
//        computed: {//不管用呢
//            count(){
//                return this.$store.state.count + 1;
//            }
//        }
//        computed: mapState({
//            count: state => state.count
//        })
        computed: {
            ...mapState([
                'count'
            ]),
//            count(){
//                return this.$store.getters.count
//            }
//            ...mapGetters([
//                'count'
//            ])
        },
//        computed: mapState([
//            'count'
//        ]),
//        methods: mapMutations([
//            'jia',
//            'jian'
//        ])
        methods: {
            ...mapMutations([
                'jia',
                'jian'
            ]),
            ...mapActions([
                'jiaplus',
                'jianplus'
            ])
        }
    }

</script>